<template>
  <div class="ganttChart">
    <Lantern str="春节快乐" class="lentern-left" />
    <ul class="itemList scrollBar">
      <li
        class="item header"
        :style="{ width: `${(dates.length + 5) * itemWidth}px` }"
      >
        <div class="label"></div>
        <div class="dates">
          <div
            class="date"
            :style="{ width: `${itemWidth}px` }"
            v-for="date in dates"
            :key="date"
          >
            {{ date.split('-')[2] }}
          </div>
        </div>
      </li>
      <li
        class="item itemData"
        v-for="item in data"
        :key="item.order"
        :style="{ width: `${(dates.length + 5) * itemWidth}px` }"
      >
        <div class="label">{{ item.order }}</div>
        <div
          class="speedOfProgress"
          :style="{
            left: `${calcPositionAndWidth(item).position}px`,
            width: `${calcPositionAndWidth(item).width}px`
          }"
        >
          <div class="progress" :style="{ width: `${item.progress}%` }"></div>
          {{ item.progress }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { ref } from 'vue'
import dayjs from 'dayjs'

import Lantern from '@/components/staticPages/lantern/index.vue'
defineOptions({
  // 组件名称
  name: 'GanttChart',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

const data = [
  {
    order: 'AWM69963320-1',
    start: '2023-01-01',
    end: '2023-01-15',
    progress: 50
  },
  {
    order: 'AWM69963320-2',
    start: '2023-01-18',
    end: '2023-02-15',
    progress: 30
  },
  {
    order: 'AWM69963320-3',
    start: '2023-01-01',
    end: '2023-01-20',
    progress: 20
  },
  {
    order: 'AWM69963320-4',
    start: '2023-02-18',
    end: '2023-02-25',
    progress: 10
  },
  {
    order: 'AWM69963320-5',
    start: '2023-01-01',
    end: '2023-01-15',
    progress: 30
  },
  {
    order: 'AWM69963320-6',
    start: '2023-01-18',
    end: '2023-02-15',
    progress: 70
  },
  {
    order: 'AWM69963320-7',
    start: '2023-01-01',
    end: '2023-01-15',
    progress: 50
  },
  {
    order: 'AWM69963320-8',
    start: '2023-01-18',
    end: '2023-02-15',
    progress: 30
  },
  {
    order: 'AWM69963320-9',
    start: '2023-01-01',
    end: '2023-01-20',
    progress: 20
  },
  {
    order: 'AWM69963320-10',
    start: '2023-02-18',
    end: '2023-02-25',
    progress: 10
  },
  {
    order: 'AWM69963320-11',
    start: '2023-01-01',
    end: '2023-01-15',
    progress: 30
  },
  {
    order: 'AWM69963320-12',
    start: '2023-01-18',
    end: '2023-02-15',
    progress: 70
  },
  {
    order: 'AWM69963320-13',
    start: '2023-01-01',
    end: '2023-01-15',
    progress: 50
  },
  {
    order: 'AWM69963320-14',
    start: '2023-01-18',
    end: '2023-02-15',
    progress: 30
  },
  {
    order: 'AWM69963320-15',
    start: '2023-01-01',
    end: '2023-01-20',
    progress: 20
  },
  {
    order: 'AWM69963320-16',
    start: '2023-02-18',
    end: '2023-02-25',
    progress: 10
  },
  {
    order: 'AWM69963320-17',
    start: '2023-01-01',
    end: '2023-01-15',
    progress: 30
  },
  {
    order: 'AWM69963320-18',
    start: '2023-01-18',
    end: '2023-02-15',
    progress: 70
  }
]
const itemWidth = 30
const dates = ref<string[]>([])

// const date = new Temporal.plainDate(2023, 1, 1)
const init = () => {
  const earliestStart = data.reduce(
    (min, item) => (dayjs(item.start).isBefore(dayjs(min)) ? item.start : min),
    data[0].start
  )
  const latestEnd = data.reduce(
    (max, item) => (dayjs(item.end).isAfter(dayjs(max)) ? item.end : max),
    data[0].end
  )
  let currentDate = dayjs(earliestStart)
  let endDate = dayjs(latestEnd).add(1, 'day')
  while (currentDate.isBefore(endDate)) {
    dates.value.push(currentDate.format('YYYY-MM-DD'))
    currentDate = currentDate.add(1, 'day')
  }
}
const calcPositionAndWidth = (item: any) => {
  const startIndex = dates.value.findIndex((date) => date === item.start)
  const endIndex = dates.value.findIndex((date) => date === item.end)
  const position = startIndex * itemWidth
  const width = (endIndex - startIndex + 1) * itemWidth
  return { position, width }
}
init()
</script>

<style scoped lang="scss">
.ganttChart {
  --labelWidth: 150px;
  height: calc(100% - 35px);
  position: relative;
  .itemList {
    position: absolute;
    top: 0;
    left: 0;
  }
  .header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
  }
  .item {
    display: grid;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    grid-template-columns: var(--labelWidth) 1fr;
    &:first-child {
      border: none;
    }
    .label {
      position: sticky;
      left: 0;
      background-color: white;
      z-index: 5;
      text-align: center;
    }
    .dates {
      display: flex;
      position: relative;
      background: white;
      .date {
        box-sizing: border-box;
        border: 1px solid #ccc;
        text-align: center;
        border-left: none;
        &:first-child {
          border-left: 1px solid #ccc;
        }
      }
    }
  }
  .itemData {
    padding: 5px 0;
  }
  .speedOfProgress {
    margin-top: 4px;
    height: 10px;
    position: relative;
    background-color: #b9d8fb;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    .progress {
      position: absolute;
      height: 100%;
      background-color: #27f;
    }
  }
}
.lentern-left {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  transform: scale(0.6);
}
</style>
